<template>
  <div class="login_div">
    <div class="title_div">千锋在线教育平台 - 教师端</div>
    <div class="input_div">
         <span>邮箱: <el-input class="el-input" placeholder="请输入邮箱号码" v-model="form.email"></el-input></span>
         <span>验证码: <el-input class="el-input"
            style="width: 30%;" placeholder="验证码" v-model="form.code"></el-input>
            <el-button type="warning" @click="sendCodes">发送验证码</el-button>
         </span>
         <span>
           <el-button type="success" @click="login">登录</el-button>
           <el-button type="danger">重置</el-button>
         </span>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        //表单数据
        form: {
          email: null,//邮箱
          code: null//验证码
        }
      }
    },
    methods:{
      //发送验证码
      sendCodes(){
        if(!this.form.email){
          this.$message.error("邮箱不能为空！");
          return;
        }

        //R(code msg data)
        //通过axios发送给后端
        this.$.ajax({
          type: "GET",
          url: "/auth/code/send",
          data: {
            email: this.form.email
          },
          success: (data) => {
            this.$message.success("邮件发送成功！");
          }
        });
      },
      //用户登录
      login(){
        this.$.ajax({
          type: "POST",
          url: "/auth/login",
          data: this.form,
          success: (data) => {
            this.$message.success("登录成功！");
            //获取jwt令牌，保存到浏览器的本地
            this.$.saveUserToken(data);
            //跳转到首页
            this.$router.push("/Index");
          }
        });
      }
    },
    mounted(){
      //手动设置一个客户端的fromType
      this.$.saveType(0);
    }
  }
</script>

<style scoped>
  .login_div {
    background-color: #2C3E50;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .title_div {
    color: white;
    font-size: 30px;
    text-shadow: 5px 5px 5px whitesmoke;
  }

  .input_div {
    width: 40%;
    height: 50%;
    background-color: white;
    margin-top: 60px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }

  .el-input {
    width: 60%;
  }
</style>
